<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id='app'>
        {{msg}}=======我是app=======

        <button @click.prevent='btn1'>tab1====点我</button>

        <router-view></router-view>
    </div>
    <script type='text/javascript'>

        var tab1 = {
            template: `<div>
            我是tab1====tab1======{{$route.params.id}}===={{$route.query.id}}
            <hr>
            <button @click.prevent='btn2'>tab1====点我2</button>
        </div>`,
        methods:{
            btn2(){
                this.$router.push('/')
            }
        }
        }
        var tab2 = {
            template: `<div>
            我是tab2====tab2
        </div>`
        }


        const router = new VueRouter({
            routes:[
                {path:'/tab1',name:'ttt',component:tab1},
                {path:'/tab2',component:tab2},
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            methods: {
                btn1() {
                    
                    //this.$router.push({path:'/tab1',params:{id:11111}})   错误写法
                   // this.$router.push({name:'ttt',params:{id:11111}})
                    this.$router.push({path:'/tab1',query:{id:11111}})
                }
            },
            router
        });
    </script>
</body>

</html>